<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div>
	<h1 class="content-title">Extra Points</h1>
	
	<div class="search-fields">
		From:<input type="text" class="date-field" id="search-from" /> ~ 
		To:<input id="search-to" type="text" class="date-field" /> 
		 Email:<input type="text" id="search-email" />
		<button id="btnSearch" style="margin-left: 10px;" onclick="searchPurchase()">Search</button>
	</div>
	<div id="result">
		<jsp:include page="table.jsp" />
	</div>
	
	<script type="text/javascript">
	$(function() {
		$(".date-field").datepicker({
			dateFormat : 'M d, yy'
		}).datepicker('setDate', new Date());

		$("#btnSearch").button().click(
				function() {
					var from = $.datepicker.formatDate('yymmdd', $(	'#search-from').datepicker('getDate'));
					var to = $.datepicker.formatDate('yymmdd', $('#search-to').datepicker('getDate'));
					var email = $('#search-email').val();
					var branch = $('#search-branch').val();
					var params = 'from=' + from + '&to=' + to + '&email='+ email;
					$.post("extrapoints/table.jsp", params, function(
							responseData) {
						$('#result').html(responseData)
					});
				})

	});
	</script>
</div>